@import "../mixins.less";

.bk-root {
  .bk-input {
    display: inline-block;
    width: 100%;
    .flex-grow(1);
    min-height: (@line-height-computed + (@padding-vertical*2) + 2);
    padding: 0 @padding-horizontal;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: @border-radius;

    @border-focus: #66afe9;
    @border-focus-faded: fade(@border-focus, 60%);
    &:focus {
      border-color: @border-focus;
      outline: 0;
      box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @border-focus-faded;
    }

    .placeholder(#999);

    &[disabled], &[readonly] {
      cursor: not-allowed;
      background-color: #eee;
      opacity: 1;
    }
  }

  select[multiple], select[size], textarea {
    &.bk-input {
      height: auto;
    }
  }

  .bk-input-group {
    width: 100%;
    height: 100%;
    .inline-flex();
    .flex-wrap(nowrap);
    .align-items(start);
    .flex-direction(column);

    white-space: nowrap;

    &.bk-inline {
      .flex-direction(row);

      & > *:not(:first-child) {
        margin-left: 5px;
      }
    }

    // XXX: this is horrible, but at least looks good by default
    input[type="checkbox"], input[type="radio"] {
      & + span {
        position: relative;
        top: -2px;
        margin-left: 3px;
      }
    }
  }
}
